<%--
  Created by IntelliJ IDEA.
  User: jshand
  Date: 2021/12/3
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/html5shiv.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/respond.min.js"></script>

    <![endif]-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/mdeditor/css/style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/mdeditor/css/editormd.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <style>

        .page-container{

            background-color: #dcdfe0;
            padding-bottom: 40px;

        }
        .blog_container{
            height: 100%;
            background-color: aliceblue;
            display: flex;

        }


        .blog_container .bl{
            flex: 5;
            border-top: solid 3px #D2D6DE;
            border-radius: 5px;
            padding: 2px 10px;
            background-color: #ffffff;
        }

        .blog_container .br{
            flex: 2;
            margin-left: 30px;
            border-top: solid 3px #D2D6DE;
            border-radius: 5px;
            padding: 0px 30px;
            background-color: #ffffff;
        }

        .blog_container .title{
            font-size: 30px;
            line-height: 24px;
        }

        .blog_container input{

            margin-top: 10px;
            outline: none;
            border: solid 2px  #00A65A ;
            height: 34px;
            font-size: 15px ;
            line-height: 34px ;
        }

        .blog_container textarea{
            height: 300px;
            width: 100%;
            margin-top: 10px;
            outline: none;
            border: solid 2px  #00A65A ;
        }

        .blog_container .inputTitle{
            width: 100%;
            /* margin-left: 10px; */
        }

        .blog_container .br .thumbnail{
            height: 100px;
            width: 100%;
            border: solid 1px red;
        }

        .blog_container .br .cate {
            margin-top: 20px;
            background-color: #ffffff;
            border-top: solid 5px #D2D6DE;
            border-radius: 5px;
            padding: 10px 20px;
        }

        .blog_container .blogbtn{

            height: 30px;
            width: 40px;
            line-height: 30px;
            border: solid 1px #D2D6DE;
            border-radius: 3px;
            cursor: pointer;
        }

        .blog_container .draft{
            color: #888888;
            background-color: #F4F4F4;
            float: left;
        }

        .blog_container .draft:hover{
            background-color: #dedede;
        }
        .blog_container .deploy{
            color:#ffffff;
            background-color: #3C8DBC;
            float:right;
        }

        .blog_container .deploy:hover{
            background-color: #3681ac;
        }


        .clear{
            clear: both;
        }


        .tagcontainer{
            width:100%;
            /*height: 100px;*/
            border: solid 1px #ccc;
            padding: 10px;
        }

        .tagcontainer .tagInputWrap{
            border: solid 2px #CCCCCC;
            margin: 3px;
            border-radius: 3px;
            padding: 2px;
        }

        .tagcontainer .tagInputWrap input{
            border: none;
            outline: none;
        }

        .tagcontainer .tagInputWrap .tag_item{
            display: inline-block;
            background-color: #5BC0DE;
            color: white;
            border-radius: 3px;
            font-size: 8px;
            padding: 5px;
            font-weight: 900;
            margin: 0 2px 1px 0px;
        }
        .tagcontainer .tagInputWrap .tag_item .remove{
            display: inline-block;
            cursor: pointer;
        }

        .tagcontainer .tagInputWrap .tag_item .remove:hover{
            background-color: #4cabde;
        }

    </style>
    <title>博客编辑</title>
</head>
<body>
<div class="page-container">

    <form action="${pageContext.request.contextPath}/admin/post" method="post" class="form form-horizontal" id="postform">
        <input type="hidden" name="_type"   value="save" />

        <%--  发布的时候 状态 0 ，草稿箱1       --%>
        <input type="hidden" id="status" name="status"  value="" />
        <input type="hidden" id="tag" name="tags" value=""     />

        <div class="blog_container" >

        <div class="bl" >
            <div class="title"> 文章编辑</div>
            <div>
                <input type="text" class="inputTitle" name="title"  value="${post.title}" />
            </div>

            <div style="height: 700px;width: 100%">
                <div id="summaryMd">
                    <textarea placeholder="请输入" name="summary" style="display:none;">${post.summary}</textarea>
                </div>
            </div>


        </div>


        <div class="br">

            <div class="thumbnail">
                待开发的缩略图

            </div>


            <div class="cate" >

                <div>栏目</div>
                <div>

                    <select name="channelId">
                        <c:forEach items="${channelList}" var="channel">
                            <option value="${channel.id}"   <c:if test="${post.channelId == channel.id}">selected</c:if>         >${channel.name}</option>
                        </c:forEach>

                    </select>


                </div>
                <div>标签</div>
                <div>
                    <div class="tagcontainer">

                        <div>标签(用逗号或空格分隔)</div>
                        <div class="tagInputWrap">
                            <input type="text" id="inputTag" value="" onblur="appendTag(this)" placeholder="添加相关标签,逗号分割" width="70px" />
                        </div>

                    </div>
                </div>
                <hr style="margin-top: 30px; border: solid 2px black;">
                <div style="margin-top: 10px;">

                    <button class="btn draft" onclick="toSubmit(1)" type="button">
                        草稿
                    </button>

                    <button class="btn deploy"  onclick="toSubmit(0)" type="button">
                        发布
                    </button>

                    <div class="clear"></div>
                </div>

            </div>
        </div>





    </div>









    </form>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/mdeditor/editormd.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    var testEditor = null;
    let allTag = [];  //[Java   PHP ]
    $(function(){
        //渲染富文本编辑器
        testEditor = editormd("summaryMd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "${pageContext.request.contextPath}/assets/mdeditor/lib/",
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "${pageContext.request.contextPath}/upload",
        });
    });

    function toSubmit(status){

        console.log(testEditor);

        $("#status").val(status);
        //提交表单
        $("#postform").submit();
    }

    function appendTag(input){


        if(allTag.length >=4){
            return input.value = '';
        }
        let tag = input.value;
        if(tag){
            $(input).before('<div class="tag_item" > '+tag+'  <div class="remove" onclick="removeTag(this,\''+tag+'\')" >X</div>  </div>')

            allTag.push(tag);
            $("#tag").val(allTag.join(",")) ;// Java ,PHP

            input.value = '';
        }

    }

    //移除标签的方法
    function removeTag(tagDiv, tagContent){
        $(tagDiv).parent().remove();
        let delIndex  = -1;
        allTag.forEach((tag,i)=>{
            if(tag == tagContent){
                delIndex = i;

                return true;
            }
        })

        allTag.splice(delIndex,1);

        $("#tag").val(allTag.join(",")) ;// Java ,PHP
    }
</script>
</body>
</html>